 <!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  <div class="head">
    <div class="wrapper">
      <div class="logo">logo</div>
      <div class="title" @click="homeHandler()">行学天下</div>
      <div class="category">
        <ul>
          <li @click="toListHandler(iteam.id)" v-for="iteam in categorys" :key="iteam.id">{{iteam.name}}</li>
        </ul>
      </div>
      <div class="contact" @click="contanctHandler()">联系我们</div>
    </div>
  </div>
</template>
<script>
//引入axios
import {get} from '../../utils/request'
export default{
  //存放数据
   data(){
     return{
       categorys:[],
       carousels:[],
     }
   },
  //存放方法
  methods:{
    //查询所有分类信息
    findAllCategory(){
      //数据交互
      get("/index/category/findCategoryTree").then(res=>{
        if(res.status==200){
          this.categorys=res.data
        }else{
          this.$message({
            type: "error",
            message: res.message
          })
        }
      });
      //(res)=>{}箭头函数
    },
    //跳转到联系我们页面
    contanctHandler(){
      this.$router.push({path: "/contact"})
    },
    homeHandler(){
      this.$router.push({path:'/home'})
    },
    //跳转到list页面
    toListHandler(id){
      this.$router.push({path:'/list',query:{categoryId:id}})
    }
  },
  //生命周期钩子函数，页面加载完之后
  created(){
    //调用查询所有栏目信息的方法
    this.findAllCategory()
  }
}
</script>

<style scoped lang='scss'>
.head {
  padding:.3em 0;
  box-shadow: 0 1px 5px #ccc;
}
.wrapper{
  width: 90%;
  height:60px;
  line-height:60px;
  .logo{
    float: left;
    cursor: pointer;
  }
  .title{
    float: left;
    font-size:20px;
    font-weight:700;
    padding: 0 1em;
    cursor: pointer;
  }
  .category{
    float: left;
    ul li{
      float: left;
      padding: 0 1.5em;
      cursor: pointer;
    }
  }
  .contact{
    float: right;
    cursor: pointer;
  }
}
</style>